<span class="<?php echo $class ?>">
  <label for="<?php echo $name ?>"><?php echo $title ?>:</label>

  <span class="form-element-body">
    <?php if (($action & (Form::ACTION_EDIT)) == $action) { ?>
    <input id="file_upload" name="file_upload" type="file"/>
    <?php } ?>

    <div class="images">
      <?php if (($action & (Form::ACTION_EDIT)) == $action) { ?>
      <table class="amp-table">
        <tr>
          <th>Image</th>
          <th>Caption</th>
          <th>Actions</th>
        </tr>
      </table>

      <div style="display: none;" class="dummy">
        <table>
        <tr <?php echo $pk ?>="">
          <td>
            <span class="thumb">
              <a href="<?php echo $image['image_src'] ?>" class="lightbox"><img src="<?php echo $image['thumb_src'] ?>"/></a>
            </span>

            <span class="missing">
              <img src="<?php echo s::config()->get('theme_url') ?>/images/icons/cross.png"/> missing!
            </span>
          </td>
          <td>
            <input type="text" class="caption" value="" disabled="disabled"/>

            <?php echo $this->menu_item->show(array('label' => 'Edit', 'icon' => 'edit', 'route' => 'javascript:', 'linkParams' => array('class' => 'editButton'))) ?>
            <?php echo $this->menu_item->show(array('label' => 'Save', 'icon' => 'save', 'route' => 'javascript:', 'linkParams' => array('class' => 'saveButton', 'style' => 'display: none;'))) ?>
            <?php echo $this->menu_item->show(array('label' => 'Cancel', 'icon' => 'cancel', 'route' => 'javascript:', 'linkParams' => array('class' => 'cancelButton', 'style' => 'display: none;'))) ?>
          </td>

          <td>
            <a href="javascript:" class="deleteButton"><?php echo $this->icon->show('remove') ?></a>
          </td>
        </tr>
        </table>
      </div>
      <?php } else { ?>
        <ul class="tiled-list">
        <?php foreach ($images as $image) { ?>
          <li class="list-item">
          <?php if ($image['thumb_src']) { ?>
            <a href="<?php echo $image['image_src'] ?>" class="thumb lightbox" alt="<?php echo $image['image_caption'] ?>" title="<?php echo $image['image_caption'] ?>"><img src="<?php echo $image['thumb_src'] ?>"/></a>
          <?php } else { ?>
            <img src="<?php echo s::config()->get('theme_url') ?>/images/icons/cross.png"/> missing!
          <?php } ?>

          <span class="caption"><?php echo $image['image_caption'] ?></span>
        </li>
        <?php } ?>
        </ul>
      <?php } ?>
    </div>
  </span>
</span>

<?php if (($action & (Form::ACTION_EDIT)) == $action) { ?>
  <?php $config = s::config() ?>
  <?php echo $this->html->css($config['theme_url'] . '/uploadify/uploadify.css') ?>
  <?php echo $this->javascript->link('swfobject.js') ?>
  <?php echo $this->javascript->link($config['theme_url'] . '/uploadify/jquery.uploadify.v2.1.4.min.js') ?>

  <script>
  $(function() {
  $(document).ready(function() {
    $('#file_upload').uploadify({
      uploader: '<?php echo $config['theme_url'] ?>/uploadify/uploadify.swf',

      script: '<?php echo $response->makeUrl(s::request()->route() . '.json') ?>',
      scriptData: { action: 'index', formAction: 'imagesUpload', <?php echo $name ?>: <?php echo $value ?>, sid: '<?php echo session_id() ?>' },
      method: 'GET',

      cancelImg: '<?php echo $config['theme_url'] ?>/uploadify/cancel.png',
      multi: true,
      removeCompleted: true,
      auto: true,

      onError: function(event, ID, fileObj, errorObj) {
        alert(errorObj.info);
      },

      onComplete: function(event, ID, fileObj, response, data) {
        response = $.parseJSON(response);

        addImage(response.image);

        $('.lightbox').fancybox();
      }
    });

    var widget = $('.<?php echo $rowClass ?>');
    var pk = '<?php echo $pk ?>';
    var deleteUrl = '<?php echo $response->makeUrl(s::request()->route(), array('action' => 'index', 'formAction' => 'imagesDelete')) ?>';
    var saveUrl = '<?php echo $response->makeUrl(s::request()->route(), array('action' => 'index', 'formAction' => 'imagesSetCaption')) ?>';

    <?php foreach ($images as $image) { ?>
      addImage({
        <?php echo $pk ?>: '<?php echo $image[$pk] ?>',
        thumb_src: '<?php echo $image['thumb_src'] ?>',
        image_src: '<?php echo $image['image_src'] ?>',
        image_caption: '<?php echo $image['image_caption'] ?>'
      });
    <?php } ?>

    $('.lightbox').fancybox();

    function addImage(image)
    {
      var e = $(widget).find('.dummy tr').clone();

      $(e).attr(pk, image[pk]);

      if (image.thumb_src) {
        $(e).find('.thumb img').attr('src', image.thumb_src);
        $(e).find('.thumb a').attr('href', image.image_src);
        $(e).find('.missing').remove();
      }
      else {
        $(e).find('.thumb').remove();
      }

      $(e).find('.caption').val(image.image_caption);

      $(widget).find('.images table:first').append(e);
    }

    $(widget).find('.deleteButton').live('click', function() {
      var e = $(this).parents('tr');

      var data = {
        <?php echo $pk ?>: $(e).attr(pk)
      };

      $.post(deleteUrl, data, function(response) {
        var e = $(widget).find('.images tr['+pk+'='+response[pk]+']');

        $(e).remove();
      });
    });

    $(widget).find('.editButton').live('click', function() {
      $(this).hide();
      $(this).parent().find('.saveButton, .cancelButton').show();
      $(this).parent().find('.caption').removeAttr('disabled');
      $(this).parent().find('.caption').data('oldValue', $(this).parent().find('.caption').val());
    });

    $(widget).find('.saveButton').live('click', function() {
      var newValue = $(this).parents('tr').find('.caption').val();
      var oldValue = $(this).parents('tr').find('.caption').data('oldValue');

      if (newValue != oldValue) {
        $(widget).find('.caption').attr('disabled', 'disabled');

        var data = {
          <?php echo $pk ?>: $(this).parents('tr').attr(pk),
          caption: newValue
        };

        $.post(saveUrl, data, function(response) {
          var e = $(widget).find('.images tr['+pk+'='+response[pk]+']');

          $(e).find('.saveButton, .cancelButton').hide();
          $(e).find('.editButton').show();
        });
      }
      else {
        $(this).parents('tr').find('.cancelButton').trigger('click');
      }
    });

    $(widget).find('.cancelButton').live('click', function() {
      $(this).parents('tr').find('.saveButton, .cancelButton').hide();
      $(this).parents('tr').find('.editButton').show();
      $(this).parents('tr').find('.caption').attr('disabled', 'disabled');
      $(this).parents('tr').find('.caption').val($(this).parents('tr').find('.caption').data('oldValue'));
    });
  });
  });
  </script>
<?php } ?>